﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="mydevices.aspx.cs" Inherits="mydevices" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link href="<%=Page.ResolveUrl("~/css/maps/maps.css")%>" rel="stylesheet" />
    <link href="<%=Page.ResolveUrl("~/css/switcher.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <script src="<%=Page.ResolveUrl("~/scripts/mydevices.js")%>"></script>
    <link href="<%=Page.ResolveUrl("~/css/scroll/jquery.mCustomScrollbar.css")%>" rel="stylesheet" />
    <script src="<%=Page.ResolveUrl("~/js/scroll/jquery.mCustomScrollbar.concat.min.js")%>"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA95d2BretRzt0NKif0eZSwuiKWhbSPLmQ&sensor=false"></script>
    <script>
        (function ($) {
            $(window).load(function () {
                $("#device-list").mCustomScrollbar({
                    autoHideScrollbar: true,
                    theme: "dark-thin",
                    advanced: {
                        updateOnContentResize: true,
                        updateOnBrowserResize: true
                    }
                });
            });
        })(jQuery);
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="mydevicesPage">
        <div id="containerCenter">
            <div id="container">
                <div class="headerTitle">My Devices</div>
            </div>
        </div>
        <!-- Start Main Item - Metro Style -->
        <div class="nav-metro">

            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - Dashboard -->
                <label class="nav-subtab subtab-pos-2 solid-orange-2" for="nav-subtab-3c">
                    <span>Dashboard</span>
                </label>
                <!-- End Sub Tab - Dashboard -->

                <!-- Start Sub Tab Content - Dashboard -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-orange-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">

                        <div class="nav-col-0 dark-text">
                            <div id="device-list" style="height: 350px;"></div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Dashboard -->

                <!-- Start Sub Tab - Add New -->
                <label class="nav-subtab subtab-pos-3 solid-green-2" for="nav-subtab-2c">
                    <span>Add New</span>
                </label>
                <!-- End Sub Tab - Add New -->

                <!-- Start Sub Tab Content - Add New -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="submitResults nav-submitbt light-text" style="display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></div>
                        <div class="nav-col-2 dark-text">
                            <div class="nav-contactform">
                                <input id="devicename" type="text" onfocus="if(this.value=='Device Name') this.value=''" onblur="this.value=this.value==''?'Device Name':this.value;" maxlength="100" value="Device Name" name="DeviceName" class="solid-green-2 light-text" />
                                <div id="coords" class="solid-green-2 light-text">Location</div>
                                <div id="hidden-coords" style="display: none;"></div>
                                <div id="hidden-res" style="display: none;"></div>
                                <textarea id="description" onfocus="if(this.value=='Description...') this.value=''" onblur="this.value=this.value==''?'Description...':this.value;" name="Description" class="solid-green-2 light-text">Description...</textarea>
                                <div id="container1" style="width: 450px; margin-bottom: 10px;">
                                    <div id="privacy" class="solid-green-2 light-text" style="float: left; height: 17px; width: 71.5%; margin-right: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif;">
                                        Privacy is by default Public.
                                    </div>
                                    <div class="onoffswitch" style="float: left;">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked />
                                        <label class="onoffswitch-label" for="myonoffswitch">
                                            <div class="onoffswitch-inner"></div>
                                            <div class="onoffswitch-switch"></div>
                                        </label>
                                    </div>
                                </div>
                                <label id="addNew" class="nav-submitbt solid-blue-2 light-text" for="nav-addnew" style="margin-top: 55px; text-align: center;">
                                    <!--<span><img src="images/demo/send-mail.png" alt="send mail" /></span>-->
                                    <span>Submit</span>
                                </label>
                                <input type="submit" class="none" value="" id="nav-addnew" name="submit" />
                            </div>
                        </div>

                        <div class="nav-col-2 dark-text">
                            <div id="map-canvas" style="height: 305px; width: 100%;"></div>
                            <%--<div id="map-canvas" style="height: 305px;width: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
                            --%>
                            <label id="mapInfo" class="nav-submitbt solid-blue-2 light-text" for="nav-addnew" style="float: left; height: 17px; width: 100%; margin-top: 10px; margin-right: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif;">
                                <span>Click on the map to set device's location</span>
                            </label>
                        </div>

                        <div class="clearspace"></div>

                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Add New -->
            </div>
            <!-- End Sub Menu -->

        </div>
        <!-- End Main Item - Metro Style -->

    </div>
</asp:Content>

